<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<html>
<head>
    <title>管理系统主窗口</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap-4.6.2-dist/css/bootstrap.min.css">

</head>
<body>

<div class="container container-fluid">
    <div class="row h-10 bg-info" >
        <div class="col-3">
            <img src="/static/bootstrap-4.6.2-dist/img/logo.png" alt="" height="60px">
            我们的超市
        </div>
        <div class="col-6"></div>
        <div class="col-3">
            当前用户: <span th:text="${username}"></span>
            <a class="btn btn-danger" href="/logout">退出</a>
        </div>
    </div>

    <div class="row h-100">
        <div class="col-3 bg-light pl-0 pr-0">
            <a href="/goods" class="list-group-item ">商品信息</a>
            <a href="/sales" class="list-group-item">销售管理</a>
            <a href="/inventory" class="list-group-item">进货管理</a>
            <a href="/category" class="list-group-item active">商品分类</a>
            <a href="/supplier" class="list-group-item">供应商管理</a>
            <a href="/sysuser" class="list-group-item">系统用户管理</a>
        </div>
        <div class="col-9 bg-light">

<!--            <%&#45;&#45;首先来一个面包屑导航，说明当前位置&#45;&#45;%>-->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/main">首页</a></li>
                    <li class="breadcrumb-item"><a href="#">分类管理</a></li>
                    <li class="breadcrumb-item active" aria-current="page">种类列表</li>
                </ol>
            </nav>
<!--            <%&#45;&#45;    增加一行，用于检索和新增  &#45;&#45;%>-->
            <div class="row mb-1">
                <div class="col-3">
                </div>
                <div class="col-7">

                </div>
                <div class="col-2">
                    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</a>
                </div>
            </div>
<!--            <%&#45;&#45;            显示真正的分类列表内容,这里使用bootstrap的表格&#45;&#45;%>-->
            <table class="table table-bordered table-hover" style="font-size: 14px !important;">
<!--                <%&#45;&#45;                给出表头显示&#45;&#45;%>-->
                <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">种类名</th>
                    <th scope="col">管理</th>
                </tr>
                </thead>
                <tbody>
<!--                <%&#45;&#45;  这使用theymeleaf来获取数据示&#45;&#45;%>-->
                    <tr th:each="category:${data}">
                        <td th:text="${category.getId()}"></td>
                        <td th:text="${category.getName()}"></td>
                        <td style="font-size: 12px !important;">
                            <a class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" th:onclick="deleteID([[${category.getId()}]])">删除</a>
                            <a class="btn btn-success" data-toggle="modal" data-target="#myModalUpdate" th:onclick="updateID([[${category.getId()}]],[[${category.getName()}]])">更新</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!--新增 增加模态框-->
<!-- 模态框（Modal） -->
<!--<%&#45;&#45; 添加新增记录窗口 &#45;&#45;%>-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    新增商品种类
                </h4>
            </div>
            <div class="modal-body">
<!--                <%&#45;&#45;    使用bootstrap表单方式设计好供应商信息输入表单  &#45;&#45;%>-->
                <div class="row ml-4">
                    <form class="form-horizontal" role="form" action="/category/addCategory" method="post">
                        <div class="form-group form-inline">
                            <label for="name">请输入种类名称：</label>
                            <input type="text" name="name" class="form-control" required="required">
                        </div>

                        <div class="form-group text-center">
                            <input type="submit" value="提交" class="btn btn-danger">
                            <input value="关闭" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--<%&#45;&#45;添加删除模块框&#45;&#45;%>-->
<div class="modal fade" id="myModalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel2">
                    确认删除该分类信息？
                </h4>
            </div>
            <div class="modal-body">
<!--                <%&#45;&#45;    使用bootstrap表单方式设计好供应商信息输入表单  &#45;&#45;%>-->
                <div class="row ml-4">
                    <form class="form-horizontal" role="form" action="/category/deleteCategory" method="post">
<!--                        <%&#45;&#45;必须要加一个隐藏的表单输入 ，这样绑定了该记录的id &#45;&#45;%>-->
                        <input type="hidden" id="categoryDeleteID" name="id">
                        <div class="form-group text-center">
                            <input type="submit" value="删除" class="btn btn-danger">
                            <input value="取消" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--<%&#45;&#45;添加更新记录模态窗口内容&#45;&#45;%>-->
<div class="modal fade" id="myModalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel1">
                    更新该商品种类信息
                </h4>
            </div>
            <div class="modal-body">
<!--                <%&#45;&#45;    使用bootstrap表单方式设计好供应商信息输入表单  &#45;&#45;%>-->
                <div class="row ml-4">
                    <form class="form-horizontal" role="form" action="/category/updateCategory" method="post">
                        <div class="form-group form-inline">
                            <label for="name">请输入分类名称：</label>
                            <input type="text" name="name" class="form-control" required="required" id="name">
                        </div>

                        <div class="form-group text-center">
                            <input type="submit" value="提交" class="btn btn-danger">
                            <input value="关闭" type="reset" class="btn btn-info" data-dismiss="modal">
                        </div>
<!--                        <%&#45;&#45;必须要加一个隐藏的表单输入 ，这样绑定了该记录的id &#45;&#45;%>-->
                        <input type="hidden" id="categoryUpdateID" name="id">
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
<script src="/static/bootstrap-4.6.2-dist/js/jquery.js"></script>
<script type="text/javascript" src="/static/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
<script>
    // <%--    当点击删除按钮时，先弹出确认框-确认删除再执行删除操作  --%>
    function deleteID(id){
        console.log(id);
        $('#categoryDeleteID').val(id);
    }
    // <%--    当点击更新按钮时就将传递过来的参数赋值给模态框里的对应输入框 --%>
    function updateID(id,name){
        $('#categoryUpdateID').val(id);
        $('#name').val(name);
    }


</script>

</body>
</html>